<template>
  <div class="standard-code-manage">
    <el-card class="file-cate">
      <div class="fun">
        <!-- <el-alert type="info" title="点击文件夹获取右侧文件数据"></el-alert> -->
        <el-input
          placeholder="输入文件夹/文件关键字"
          style="margin:0 5px"
          size="small"
          clearable
          @clear="handleSearchInputClear"
          v-model.trim="searchFileQuery.name"
        ></el-input>
        <el-button @click="searchFileByKeys" size="small" icon="el-icon-search">搜索</el-button>
        <el-button @click="enterImport" size="small" icon="el-icon-upload2">上传</el-button>
        <el-button @click="refreshFileTree" icon="el-icon-refresh" size="small">刷新</el-button>
      </div>
      <!-- <div class="tree-content" v-loading="false"> -->
      <el-skeleton animated :loading="treeLoading" :rows="dirData.length > 0 ? dirData.length : 18">
        <template>
          <el-tree
            v-if="showDirTree"
            node-key="id"
            :default-expand-all="isExpandTree"
            @node-click="handleNodeClick"
            icon-class="el-icon-folder"
            highlight-current
            :props="dirProps"
            :data="dirData"
            ref="dirTreeRef"
          ></el-tree>
        </template>
      </el-skeleton>
      <!-- </div> -->
    </el-card>
    <el-card class="file-content">
      <el-table
        ref="table"
        v-loading="tableLoading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        id="table"
        :data="fileList"
        style="width:100%"
        :height="tableHeight"
        highlight-current-row
        border
        stripe
        size="medium"
      >
        <el-empty slot="empty" />

        <el-table-column label="编号" type="index" width="60" align="center"></el-table-column>
        <el-table-column label="文件名" prop="name"></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="seeFile(scope.row)" type="text" size="medium" icon="el-icon-view">预览</el-button>
            <el-button
              @click="downloadFile(scope.row.id)"
              type="text"
              size="medium"
              icon="el-icon-download"
            >下载</el-button>
            <!-- <span v-show="scope.row.sex==2">女</span> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 上传文件对话框 -->
    <el-dialog
      class="upload-dialog"
      title="上传文件"
      :visible.sync="uploadFileDiaLogVisible"
      @close="uploadExcelDiaLogClosed"
    >
      <el-form :model="uploadForm" ref="uploadFormRef" :rules="uploadFormRules" label-width="100px">
        <el-form-item label="目录名称:" prop="dirPath">
          <el-input v-model.trim="uploadForm.dirPath"></el-input>
        </el-form-item>
        <el-form-item label="父级目录:" prop="pid">
          <el-cascader
            :show-all-levels="false"
            style="width:100%"
            v-model="uploadForm.pid"
            :options="dirData"
            :props="props"
            clearable
          ></el-cascader>
        </el-form-item>

        <el-form-item label="上传目录文件:">
          <el-upload
            style="width:100%"
            drag
            :before-upload="beforeUserExcelUpload"
            action="/api/analyse/uploadFiles"
            :data="uploadForm"
            :headers="headers"
            :on-change="handleFileListChange"
            ref="importExcelRef"
            :auto-upload="false"
            :on-success="handleUserExcelUploadSuccess"
          >
            <i class="el-icon-upload"></i>
            <div>
              将文件拖到此处，或
              <em style="color:#0090ff">点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadFiles">确定</el-button>
        <el-button @click="uploadFileDiaLogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog top="10vh" title="预览" width="70%" :visible.sync="fileDiaLogVisible">
      {{fileUrl}}
      <iframe width="100%" style="height:70vh" :src="fileUrl" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { selectDirTreeApi, updateDirPathApi, searchFileByKeysApi, selectFileByPidApi, uploadFilesApi, downloadFileByIdApi } from '../../network/StandardCodeManage_Api/StandardCodeManage_Api.js'
export default {
  name: 'StandardCodeManages',
  data () {
    return {
      projectUrl,
      fileUrl: '',
      dirData: [],
      treeLoading: false,
      isExpandTree: false,
      showDirTree: true,
      dirProps: {
        children: 'children',
        label: 'name',
        disabled: (data) => {
          return data.children
        }
      },

      uploadFileDiaLogVisible: false,
      headers: {

      },
      uploadForm: {
        dirPath: '',
        pid: '',
      },
      uploadFormRules: {

      },
      // 级联选择器配置
      props: {
        expandTrigger: 'hover',
        value: 'id',
        children: 'children',
        label: 'name',
        emitPath: false,
        checkStrictly: true
      },
      // 当前选中的文件夹
      currentSelectDir: null,
      tableHeight: 0,
      tableLoading: false,
      fileList: [],
      searchFileQuery: {
        name: ''
      },
      fileDiaLogVisible: false
    }
  },

  methods: {
    // 获取标准规范文件夹目录树结构
    selectDirTree () {
      this.treeLoading = true
      this.showDirTree = false
      selectDirTreeApi().then(res => {
        if (res.data.code != 200) {
          return this.$message.error('获取标准规范文件夹目录失败 请重试')
        }
        this.dirData = res.data.data
        this.showDirTree = true
        this.treeLoading = false
      }).catch(err => {
        this.treeLoading = false
        this.$message.error('获取标准规范文件夹目录失败 请重试')
      })
    },

    // 刷新文件夹目录树
    refreshFileTree () {
      updateDirPathApi().then(res => {
        if (res.data.code != 200) {
          return this.$message.error('刷新标准规范文件失败 请重试')
        }
        this.$message.success(res.data.msg)
        this.selectDirTree()
      }).catch(err => {
        this.$message.error('刷新标准规范文件失败 请重试')
      })
    },

    // 点击文件夹获取该文件夹下的文件
    handleNodeClick (data) {
      this.currentSelectDir = JSON.parse(JSON.stringify(data))
      this.tableLoading = true
      selectFileByPidApi({ pid: data.id }).then(res => {
        console.log(res)
        if (res.data.code != 200) {
          return this.$message.error('获取标准规范文件失败 请重试')
        }
        this.fileList = res.data.data
        this.tableLoading = false
      }).catch(err => {
        this.tableLoading = false
        this.$message.error('获取标准规范文件失败 请重试')
      })
    },

    // 通过关键字搜索文件夹/文件
    searchFileByKeys () {
      this.treeLoading = true
      this.showDirTree = false
      searchFileByKeysApi(this.searchFileQuery).then(res => {
        console.log(res)
        if (res.data.code != 200) {
          return this.$message.error('搜索失败 请重试')
        }
        if (res.data.data.directory) {
          this.dirData = res.data.data.directory
        } else {
          this.dirData = []
        }
        this.fileList = res.data.data.file
        this.showDirTree = true
        this.treeLoading = false
        // this.expandAllDir(true)
        this.isExpandTree = true
      }).catch(err => {
        this.treeLoading = false
        this.$message.error('搜索失败 请重试')
      })
    },

    // 点击清空搜索框的内容
    handleSearchInputClear () {
      this.isExpandTree = false
      this.fileList = []
      this.selectDirTree()
      // this.searchFileByKeys()
    },

    // 进入上传对话框
    enterImport () {
      this.uploadFileDiaLogVisible = true
    },

    beforeUserExcelUpload (file) {
      // let testmsg = (file.name.substring(file.name.lastIndexOf('.') + 1)).toLocaleLowerCase()
      // const extension = testmsg === 'xls' || testmsg === 'xlsx'
      // if (!extension) {
      //   this.$message.warning('上传附件必须是xls/xlsx 表格格式')
      //   return false
      // }
    },

    handleFileListChange (file, fileList) {
      // console.log(fileList)
      // this.uploadForm.uploadFiles = file.raw
    },

    // 确定上传
    uploadFiles () {
      this.$refs.importExcelRef.submit()
    },

    // 上传成功的回调
    handleUserExcelUploadSuccess (res, file) {
      if (res.code != 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.refreshFileTree()
      this.handleNodeClick(this.currentSelectDir)
      this.uploadFileDiaLogVisible = false
    },

    // 导入对话框关闭
    uploadExcelDiaLogClosed () {
      this.$refs.uploadFormRef.resetFields()
      this.$refs.importExcelRef.clearFiles()
    },

    // 下载文件
    downloadFile (fileId) {
      window.open(`/api/analyse/downloadDirById?id=${fileId}`, '_self')
    },

    // 预览
    seeFile (row) {
      this.fileUrl = ''
      let url = ''
      if (row.path) {
        url = row.path.split('hyjsjk')[1]
      }
      this.fileUrl = url ? this.projectUrl + url : ''
      this.fileDiaLogVisible = true
    }
  },

  mounted () {
    this.$setTableHeightNoPagination(this, 'tableHeight', 'table')
    this.selectDirTree()
  },

  activated () {
    // alert(1)
  }
}
</script>

<style lang="less" scoped>
.standard-code-manage {
  height: 100%;

  display: flex;
  .file-cate {
    // background-color: gray;
    // width: 3rem;
    overflow: auto;
    .fun {
      height: 38px;
      display: flex;
      margin-bottom: 15px;
      align-items: center;
    }
    /deep/ .el-card__body {
      display: flex;
      flex-direction: column;
    }
    .tree-content {
      // background: rgb(172, 165, 165);
      height: calc(100vh - 218px);
    }
  }
  .file-content {
    margin-left: 20px;
    flex: 1;
    // background-color: rgb(252, 221, 221);
  }

  .upload-dialog {
    /deep/ .el-upload-dragger,
    /deep/ .el-upload {
      width: 100%;
    }
  }
}
</style>